<template>
	<div id="shop-info">
		<Spin fix v-show="spinShow"></Spin>
		
		<div class="form-wrapper scroll">
			<div class="hc-class form-content">
				<Form ref="formValidate" :model="formValidate" :rules="ruleValidate" label-position="left" :label-width="120">
			        <FormItem label="小程序名称" prop="wechat_name_cn">
			            <Input size="default" v-model="formValidate.wechat_name_cn" placeholder="请输入您的小程序名称" style="width: 200px"></Input>
			        </FormItem>
			        
			        <FormItem label="商城口号" prop="mall_transmit_name">
			            <Input size="default" v-model="formValidate.mall_transmit_name" placeholder="用户商城对外传播口号" style="width: 200px"></Input>
			        </FormItem>
			        
			        <FormItem label="商城logo" prop="mall_transmit_logo">
		        		<div class="upload-operate-wrapper">
		        			<Button type="primary" ghost class="upload-img-btn">
			        			上传图片
			        			<input name="mall_transmit_logo" type="file" accept="image/*" @change='handleFileChange'></input>
			        		</Button>
			        		<span>推荐尺寸:120*50格式</span>
							<Button type="primary" ghost class="upload-img-btn" id="clear-cache" @click="clearcache">
			        			清除海报缓存
			        			
			        		</Button>
		        		</div>
						<img  class="upload-img" style="width: 120px; height: 50px;" v-if="formValidate.mall_transmit_logo!=''" :src="formValidate.mall_transmit_logo"/>
			        </FormItem>

			        <FormItem label="首页分享图片" prop="mall_transmit_image">
						<div class="upload-operate-wrapper">
							<Button type="primary" ghost class="upload-img-btn">
								上传图片
								<input name="mall_transmit_image" type="file" accept="image/*" @change='handleFileChange'></input>
							</Button>
							<span>推荐尺寸:520*416格式</span>
						</div>
						<img class="upload-img" style="width: 120px; height: 96px;"  v-if="formValidate.mall_transmit_image!=''" :src="formValidate.mall_transmit_image"/>
			        </FormItem>

			        <FormItem label="短信签名" prop="notice_sms_signature">
			            <Input size="default" v-model="formValidate.notice_sms_signature" placeholder="用户发送给用户的短信签名" style="width: 200px"></Input>
			        </FormItem>

			        <FormItem label="公众号二维码" prop="input0">
						<div class="upload-operate-wrapper">
							<Button type="primary" ghost class="upload-img-btn">
								上传图片
								<input name="input0" type="file" accept="image/*" @change='handleFileChange'></input>
							</Button>
							<span>建议尺寸：320*320格式</span>
						</div>
						<img class="upload-img" style="width: 120px; height: 120px;"  v-if="formValidate.input0!=''" :src="formValidate.input0"/>
			        </FormItem>

			        <FormItem label="小编二维码" prop="mall_customer_wechat_qrcode">
						<div class="upload-operate-wrapper">
							<Button type="primary" ghost class="upload-img-btn">
								上传图片
								<input name="mall_customer_wechat_qrcode" type="file" accept="image/*" @change='handleFileChange'></input>
							</Button>
							<span>建议尺寸：320*320格式</span>
						</div>
						<img class="upload-img" style="width: 120px; height: 120px;"  v-if="formValidate.mall_customer_wechat_qrcode!=''" :src="formValidate.mall_customer_wechat_qrcode "/>
			        </FormItem>

			        <FormItem label="客服电话" prop="mall_customer_phone">
			            <Input size="default" v-model="formValidate.mall_customer_phone"  placeholder="用户联系平台客服方式" style="width: 200px"></Input>
			        </FormItem>

			        <FormItem label="客服微信" prop="mall_customer_wechat_num">
			            <Input size="default" v-model="formValidate.mall_customer_wechat_num" placeholder="用户联系平台客服方式" style="width: 200px"></Input>
			        </FormItem>
					
			        <FormItem label="" prop="">
			            
			        </FormItem>
			    </Form>
			</div>	
		</div>
		
		<div class="bottom-wrapper flex center column-center">
			<Button type="primary" size="default" :loading="submitLoading" @click="handleSubmit('formValidate')">
        				提交
            </Button>
		</div>
	</div>
</template>

<script>
	import vueCropper from 'vue-cropper'
	import { uploadImage } from 'api/uploadImage'
    import { getShopInfo,updateShopInfo,clearPostertCache } from 'api/shopInfo'
	import axios from 'axios'

    export default {
        data () {
            return {
            		cropName:'',
            		showCrop: false,
            		cropOption: {
            			img: '',
			        outputType: 'jpeg || png ',
            			size: 1
            		},
            		spinShow: true,
            		submitLoading: false,
                formValidate: {
                    wechat_name_cn: '',
                    mall_transmit_name: '',
                    mall_transmit_logo: '',
                    mall_transmit_image: '',
                    notice_sms_signature: '',
                    input0: '',
                    mall_customer_wechat_qrcode: '',
                    mall_customer_phone: '',
                    mall_customer_wechat_num: ''
                },
                ruleValidate: {
                    wechat_name_cn: [
                        { required: true, message: '小程序名称不能为空', trigger: 'blur' }
                    ],
                    mall_transmit_name: [
                        { required: true, message: '商城口号不能为空', trigger: 'blur' },
                    ],
                    mall_transmit_logo: [
                        { required: true, message: '请添加商城logo', trigger: 'blur' }
                    ],
                    mall_transmit_image: [
                        { required: true, message: '请添加首页分享图', trigger: 'blur' }
                    ],
                    notice_sms_signature: [
                        { required: true, message: '短信签名不能为空', trigger: 'blur' },
                    ],
                    input0: [
                        { required: true, message: '请添加公众号二维码', trigger: 'blur' }
                    ],
                    mall_customer_wechat_qrcode: [
                        { required: true, message: '请添加客服二维码', trigger: 'blur' }
                    ],
                    mall_customer_phone: [
                        { required: true, message: '请添加客服电话', trigger: 'blur' }
                    ],
                    mall_customer_wechat_num: [
                        { required: true, message: '请添加客服二维码', trigger: 'blur' }
                    ]
                }
            }
        },
        methods: {
    		handleFileChange (event) {
    			console.log('sdasdd');
				this.spinShow = true;
    			uploadImage(event.target.files[0]).then(imgUrl => {
					this.formValidate[event.target.name] = imgUrl;
        			this.spinShow = false;
				}).catch(err => {
	        		this.spinShow = false;
 					this.$Message.error('上传图片失败');	

				})
    		},
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
						this.updateData();
                    } else {
                        this.$Message.error('请填写完整信息!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            getData() {
        		getShopInfo().then(_res => {
        			this.spinShow = false;
        			if (_res.data.mallConfig) {
                		this.formValidate = _res.data.mallConfig;
             	}
                }).catch(err => {
            			this.spinShow = false;
                    this.$Message.error(err.message);
                })
            },
            updateData() {
        		this.spinShow = true;
        		updateShopInfo({configParam:this.formValidate}).then(_res => {
        			this.spinShow = false;
                	this.$Message.success("提交成功");
                }).catch(err => {
        			this.spinShow = false;
                    this.$Message.error(err.message);
                })
			},
			clearcache(){
				this.spinShow = true;
				clearPostertCache({}).then(_res =>{
					this.spinShow = false;
					this.$Message.success("清除成功");
				}).catch(err => {
        			this.spinShow = false;
                    this.$Message.error(err.message);
                })
			}
        },
        created() {
        		this.getData();
        },
        components: {
			vueCropper
		}
    }
</script>

<style scoped>
	#clear-cache{
		margin-left: 10px;
	}
	#shop-info {
		position: relative;
		width: auto;
		height: calc(100vh - 88px);		
		background: white;
		margin: 12px 20px 12px 12px;
	}
	.form-wrapper {
		width: 100%;
		height: calc(100vh - 124px);		
		padding: 20px 0;
	}
	.form-content {
		margin-left: 250px;
		height: 100%;
	}
	.upload-operate-wrapper {
		display: flex;
		align-items: center;
	}
	.upload-operate-wrapper span {
		color: darkgray;
		margin-left: 6px;
	}
	.upload-img-btn {
		position: relative;
	}
	.upload-img-btn input {
		position: absolute;
		opacity: 0;
		left: 0;top: 0;width: 100%;height: 100%;
	}
	.upload-img {
		margin-top: 10px;
		border: 1px solid #F2F2F2;
	}
	.cropper-wrapper {
		display: flex;
		align-items: center;
		justify-content: center;
		
	}
	.cropper-content {
		width: 200px;
		height: 200px;
	}
	.bottom-wrapper {
		width: 100%;
		height: 60px;
		position: absolute;
		background: white;
		left: 0;
		bottom: 0;
		border: 1px solid #e8eaec;
	}
</style>

<style type="text/css">
</style>